<template>
  <div>
    <div class="storage-range-content mgb10 font-grey font-bold f14">
      <div class="weight-name">{{ $t('setting.Foreground display name') }}</div>
      <div class="weight-range">
        {{calType}}
        <template v-if="calType === 'weight'">
          <template v-if="weightType === 'goods'">
            {{ $t('商品实重或体积重') }}
          </template>
          <template v-else-if="weightType === 'box'">
            {{$t('每箱实重或体积重')}}
          </template>
        </template>
        <template v-else-if="calType === 'volume'">
          <template v-if="weightType === 'goods'">
            商品方数
          </template>
          <template v-else-if="weightType === 'box'">
            每箱方数
          </template>
        </template>

      </div>
      <div class="weight-price">{{ $t('setting.Unit price') }}</div>
    </div>
    <div
      class="storage-range-content mgb10"
      v-for="(item,index) in weightRangeArr"
      :key="'storage-range-' + index"
    >
      <div class="weight-name">
        {{$t('阶梯index',{index: index+1})}}:
        <el-input v-model="item.weightName" style="width: 50%" :placeholder="$t('请输入前台显示名称')" :disabled="onlyPrice"></el-input>
      </div>
      <div class="weight-range">
        <template v-if="calType === 'weight'">
          ≥ <el-input-number v-model="item.weight" :min="0" :precision="2" :disabled="index === 0 || onlyPrice"></el-input-number>
          kg
        </template>
        <template v-else-if="calType === 'volume'">
          ≥ <el-input-number v-model="item.volume" :min="0" :precision="5" :disabled="index === 0 || onlyPrice"></el-input-number>
          m³
        </template>
      </div>
      <div class="weight-price">
        <el-input-number v-model="item.price" :min="0" :precision="2" @change="changeValue"></el-input-number>
        <template v-if="type === typeObj.stockNum || type === typeObj.fullNum">
          {{$t('元/个/天')}}
        </template>
        <template v-else>
          {{$t('元/箱/天')}}
        </template>
        <template v-if="(index !== 0 && !onlyPrice) || canDeleteAll">
          <el-button style="padding: 2px" type="danger" size="small" icon="el-icon-minus" circle @click="removeRange(weightRangeArr, index)"></el-button>
        </template>
      </div>
    </div>
    <div class="mgt20" v-if="!onlyPrice">
      <el-button icon="el-icon-plus" type="primary" @click="addRange(weightRangeArr)">{{ $t('添加更多阶梯') }}</el-button>
    </div>
  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import StorageWeightRangeMixin from "@/views/warehouse/mixin/StorageWeightRangeMixin";

const typeObj = {
  stockNum: 'stock_num',
  middleNum: 'middle_num',
  fullNum: 'full_num',
}

export default {
  name: 'StorageVolumeRange',
  mixins: [StorageWeightRangeMixin],
  watch: {

  },
  props: {
    weightRangeArr: {
      type: Array,
    },
    type: {
      type: String,
      default: typeObj.stockNum
    },
    // 用户不可新增或修改名称、重量 只能修改单价
    onlyPrice: {
      type: Boolean,
      default: false,
    },
    // 默认不能删除第一个
    canDeleteAll: {
      type: Boolean,
      default: false,
    },
    weightType: {
      type: String,
      default: 'goods', // 单个商品为goods 箱为box
    },
    calType: {
      type: String,
      default: 'weight',
    }
  },
  data(){
    return {
      typeObj
    }
  },
  methods:{
    changeValue(){
      this.$emit('changeValue',true)
    }
  }
}
</script>


<style scoped lang="scss">
.storage-range-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .weight-name{
    width: 60%;
  }
  .weight-range{
    width: 45%;
  }
  .weight-price{
    width: 45%;
  }
}
</style>
